<template>
  <div class="music-view content-container">
    <!-- 头部横幅 -->
    <div class="music-header">
      <div class="header-bg">
        <img src="../assets/周杰伦.png" alt="音乐盛典" class="header-image">
        <div class="header-overlay"></div>
      </div>
      <div class="header-content">
        <h1 class="header-title">乐享音乐</h1>
        <p class="header-subtitle">发现优质音乐，享受美妙旋律</p>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="music-content content-wrapper">
      <!-- 标签页导航 -->
      <div class="tab-navigation">
        <button 
          v-for="tab in tabs" 
          :key="tab.key"
          class="tab-item"
          :class="{ active: activeTab === tab.key }"
          @click="switchTab(tab.key)"
        >
          {{ tab.name }}
        </button>
      </div>

      <!-- 标签页内容 -->
      <div class="tab-content">
        <!-- 网络热歌 -->
        <div v-if="activeTab === 'hotSongs'" class="hot-songs-section">
          <div class="section-header">
            <h2 class="section-title">🔥 网络热歌</h2>
            <a href="#" class="section-more">更多 <i class="fa fa-angle-right"></i></a>
          </div>
          <div class="songs-list">
            <div 
              v-for="(song, index) in hotSongs" 
              :key="song.id"
              class="song-item"
              @click="playSong(song)"
            >
              <div class="song-rank">
                <span v-if="index < 3" class="top-rank">{{ index + 1 }}</span>
                <span v-else class="normal-rank">{{ index + 1 }}</span>
              </div>
              <div class="song-info">
                <div class="song-main-info">
                  <h3 class="song-title">{{ song.title }}</h3>
                  <span class="song-artist">{{ song.artist }}</span>
                </div>
                <div class="song-extra-info">
                  <span class="song-duration">{{ song.duration }}</span>
                  <button class="song-play-btn">
                    <i class="fa fa-play"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 经典音乐MV -->
        <div v-if="activeTab === 'classicMV'" class="classic-mv-section">
          <div class="section-header">
            <h2 class="section-title">🎬 经典音乐MV</h2>
            <a href="#" class="section-more">更多 <i class="fa fa-angle-right"></i></a>
          </div>
          <div class="mv-grid">
            <div 
              v-for="mv in classicMVs" 
              :key="mv.id"
              class="mv-card"
              @click="playMV(mv)"
            >
              <div class="mv-thumbnail">
                <img v-img-error :src="mv.thumbnail" alt="{{ mv.title }}" class="mv-image">","},{"old_str":
                <div class="mv-duration">{{ mv.duration }}</div>
                <div class="mv-overlay">
                  <div class="mv-play-icon">
                    <i class="fa fa-play-circle"></i>
                  </div>
                </div>
              </div>
              <div class="mv-info">
                <h3 class="mv-title">{{ mv.title }}</h3>
                <p class="mv-artist">{{ mv.artist }}</p>
                <div class="mv-stats">
                  <span class="mv-views"><i class="fa fa-eye"></i> {{ formatNumber(mv.views) }}</span>
                  <span class="mv-likes"><i class="fa fa-heart"></i> {{ formatNumber(mv.likes) }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 音乐测评 -->
        <div v-if="activeTab === 'musicReviews'" class="music-reviews-section">
          <div class="section-header">
            <h2 class="section-title">📝 音乐测评</h2>
            <a href="#" class="section-more">更多 <i class="fa fa-angle-right"></i></a>
          </div>
          <div class="reviews-container">
            <div 
              v-for="review in musicReviews" 
              :key="review.id"
              class="review-card"
            >
              <div class="review-header">
                <div class="review-rating">
                  <span class="rating-score">{{ review.rating }}</span>
                  <div class="rating-stars">
                    <i v-for="n in 5" :key="n" class="fa fa-star" :class="{ 'active': n <= Math.floor(review.rating) }"></i>
                  </div>
                </div>
                <h3 class="review-title">{{ review.title }}</h3>
              </div>
              <div class="review-content">
                <p class="review-excerpt">{{ review.excerpt }}</p>
              </div>
              <div class="review-footer">
                <div class="review-music-info">
                  <span class="review-music-title">{{ review.musicTitle }}</span>
                  <span class="review-music-artist">{{ review.musicArtist }}</span>
                </div>
                <div class="review-meta">
                  <span class="review-author">{{ review.author }}</span>
                  <span class="review-date">{{ review.date }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 音乐排行榜 -->
        <div v-if="activeTab === 'musicRankings'" class="music-rankings-section">
          <div class="section-header">
            <h2 class="section-title">🏆 音乐排行榜</h2>
            <div class="ranking-tabs">
              <button 
                v-for="rankingTab in rankingTabs" 
                :key="rankingTab.key"
                class="ranking-tab"
                :class="{ active: activeRankingTab === rankingTab.key }"
                @click="switchRankingTab(rankingTab.key)"
              >
                {{ rankingTab.name }}
              </button>
            </div>
          </div>
          <div class="ranking-content">
            <div 
              v-for="(song, index) in currentRankingList" 
              :key="song.id"
              class="ranking-item"
              @click="playSong(song)"
            >
              <div class="ranking-number">
                <span v-if="index < 3" class="top-ranking">{{ index + 1 }}</span>
                <span v-else class="normal-ranking">{{ index + 1 }}</span>
              </div>
              <div class="ranking-cover">
                <img v-img-error :src="song.cover" alt="{{ song.title }}" class="song-cover">","},{
                <button class="cover-play-btn">
                  <i class="fa fa-play"></i>
                </button>
              </div>
              <div class="ranking-info">
                <h3 class="ranking-song-title">{{ song.title }}</h3>
                <p class="ranking-song-artist">{{ song.artist }}</p>
                <div class="ranking-stats">
                  <span class="ranking-change" :class="song.change > 0 ? 'up' : song.change < 0 ? 'down' : 'stable'">
                    <i v-if="song.change > 0" class="fa fa-caret-up"></i>
                    <i v-else-if="song.change < 0" class="fa fa-caret-down"></i>
                    <i v-else class="fa fa-minus"></i>
                    {{ Math.abs(song.change) || 0 }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 迷你音乐播放器 -->
    <div v-if="currentPlaying" class="mini-player">
      <div class="player-info">
        <img v-img-error :src="currentPlaying.cover || 'https://placehold.co/60x60/FB7299/FFFFFF?text=Music'" alt="当前播放" class="player-cover">","},{
        <div class="player-text">
          <h4 class="player-title">{{ currentPlaying.title }}</h4>
          <p class="player-artist">{{ currentPlaying.artist }}</p>
        </div>
      </div>
      <div class="player-controls">
        <button class="control-btn" @click="togglePlay">{{ isPlaying ? '暂停' : '播放' }}</button>
        <button class="control-btn" @click="nextSong">下一首</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MusicView',
  data() {
    return {
      // 标签页数据
      tabs: [
        { key: 'hotSongs', name: '网络热歌' },
        { key: 'classicMV', name: '经典MV' },
        { key: 'musicReviews', name: '音乐测评' },
        { key: 'musicRankings', name: '排行榜' },
      ],
      activeTab: 'hotSongs',
      
      // 排行榜标签
      rankingTabs: [
        { key: 'billboard', name: '公告牌' },
        { key: 'spotify', name: 'Spotify' },
        { key: 'netease', name: '网易云' },
        { key: 'qq', name: 'QQ音乐' },
      ],
      activeRankingTab: 'billboard',
      
      // 当前播放
      currentPlaying: null,
      isPlaying: false,
      
      // 网络热歌数据
      hotSongs: [
        { id: 1, title: '起风了', artist: '买辣椒也用券', duration: '04:00', cover: 'https://placehold.co/150x150/FB7299/FFFFFF?text=Song1' },
        { id: 2, title: '你的答案', artist: '阿冗', duration: '03:35', cover: 'https://placehold.co/150x150/23ADE5/FFFFFF?text=Song2' },
        { id: 3, title: '世界这么大还是遇见你', artist: '程响', duration: '03:28', cover: 'https://placehold.co/150x150/4CAF50/FFFFFF?text=Song3' },
        { id: 4, title: '少年', artist: '梦然', duration: '03:58', cover: 'https://placehold.co/150x150/FF9800/FFFFFF?text=Song4' },
        { id: 5, title: '下山', artist: '要不要买菜', duration: '02:55', cover: 'https://placehold.co/150x150/9C27B0/FFFFFF?text=Song5' },
        { id: 6, title: '桥边姑娘', artist: '海伦', duration: '03:04', cover: 'https://placehold.co/150x150/607D8B/FFFFFF?text=Song6' },
        { id: 7, title: '踏山河', artist: '是七叔呢', duration: '03:48', cover: 'https://placehold.co/150x150/3F51B5/FFFFFF?text=Song7' },
        { id: 8, title: '我和我的祖国', artist: '王菲', duration: '03:36', cover: 'https://placehold.co/150x150/E91E63/FFFFFF?text=Song8' },
        { id: 9, title: '麻雀', artist: '李荣浩', duration: '04:05', cover: 'https://placehold.co/150x150/00BCD4/FFFFFF?text=Song9' },
        { id: 10, title: '你笑起来真好看', artist: '李昕融', duration: '03:24', cover: 'https://placehold.co/150x150/CDDC39/FFFFFF?text=Song10' },
      ],
      
      // 经典MV数据
      classicMVs: [
        { id: 1, title: '以父之名', artist: '周杰伦', thumbnail: 'https://placehold.co/400x225/000000/FFFFFF?text=MJ+1', duration: '05:43', views: 12800000, likes: 560000 },
        { id: 2, title: '夜曲', artist: '周杰伦', thumbnail: 'https://placehold.co/400x225/000000/FFFFFF?text=MJ+2', duration: '04:12', views: 9600000, likes: 480000 },
        { id: 3, title: '江南', artist: '林俊杰', thumbnail: 'https://placehold.co/400x225/000000/FFFFFF?text=MJ+3', duration: '04:28', views: 8900000, likes: 420000 },
        { id: 4, title: '小幸运', artist: '田馥甄', thumbnail: 'https://placehold.co/400x225/000000/FFFFFF?text=MJ+4', duration: '04:25', views: 15200000, likes: 680000 },
        { id: 5, title: '十年', artist: '陈奕迅', thumbnail: 'https://placehold.co/400x225/000000/FFFFFF?text=MJ+5', duration: '03:26', views: 10500000, likes: 520000 },
        { id: 6, title: '海阔天空', artist: 'Beyond', thumbnail: 'https://placehold.co/400x225/000000/FFFFFF?text=MJ+6', duration: '05:23', views: 18900000, likes: 950000 },
      ],
      
      // 音乐测评数据
      musicReviews: [
        { 
          id: 1, 
          title: '周杰伦新专辑深度解析：华语乐坛的又一次革新', 
          excerpt: '周杰伦的最新专辑不仅仅是音乐作品，更是一场视听盛宴。本文将从作曲、编曲、歌词等多个维度，深入剖析这张专辑的艺术价值...', 
          rating: 9.2, 
          musicTitle: '最伟大的作品', 
          musicArtist: '周杰伦', 
          author: '音乐评论家小王', 
          date: '2023-07-15',
        },
        { 
          id: 2, 
          title: '为什么《孤勇者》能成为全民热歌？', 
          excerpt: '《孤勇者》的走红绝非偶然，它触及了当代年轻人的情感共鸣点。本文将从心理学角度分析这首歌的成功要素...', 
          rating: 8.7, 
          musicTitle: '孤勇者', 
          musicArtist: '陈奕迅', 
          author: '音乐心理分析师', 
          date: '2023-06-20',
        },
        { 
          id: 3, 
          title: '华语乐坛新生代歌手崛起：他们如何改变音乐格局', 
          excerpt: '近年来，一批新生代歌手凭借独特的音乐风格和创新精神，为华语乐坛注入了新的活力。本文将聚焦这些新兴力量...', 
          rating: 8.5, 
          musicTitle: '新生代合集', 
          musicArtist: 'Various Artists', 
          author: '音乐产业观察家', 
          date: '2023-08-10',
        },
      ],
      
      // 音乐排行榜数据
      rankings: {
        billboard: [
          { id: 1, title: 'Blinding Lights', artist: 'The Weeknd', change: 0, cover: 'https://placehold.co/150x150/FB7299/FFFFFF?text=BB1' },
          { id: 2, title: 'Save Your Tears', artist: 'The Weeknd', change: 2, cover: 'https://placehold.co/150x150/23ADE5/FFFFFF?text=BB2' },
          { id: 3, title: 'Levitating', artist: 'Dua Lipa', change: -1, cover: 'https://placehold.co/150x150/4CAF50/FFFFFF?text=BB3' },
          { id: 4, title: 'Stay', artist: 'Justin Bieber & The Kid LAROI', change: 1, cover: 'https://placehold.co/150x150/FF9800/FFFFFF?text=BB4' },
          { id: 5, title: 'Shivers', artist: 'Ed Sheeran', change: 3, cover: 'https://placehold.co/150x150/9C27B0/FFFFFF?text=BB5' },
        ],
        spotify: [
          { id: 1, title: 'Heat Waves', artist: 'Glass Animals', change: -2, cover: 'https://placehold.co/150x150/607D8B/FFFFFF?text=SP1' },
          { id: 2, title: 'Stay', artist: 'Justin Bieber & The Kid LAROI', change: 0, cover: 'https://placehold.co/150x150/3F51B5/FFFFFF?text=SP2' },
          { id: 3, title: 'Good 4 U', artist: 'Olivia Rodrigo', change: 1, cover: 'https://placehold.co/150x150/E91E63/FFFFFF?text=SP3' },
          { id: 4, title: 'Bad Habits', artist: 'Ed Sheeran', change: -1, cover: 'https://placehold.co/150x150/00BCD4/FFFFFF?text=SP4' },
          { id: 5, title: 'Industry Baby', artist: 'Lil Nas X & Jack Harlow', change: 2, cover: 'https://placehold.co/150x150/CDDC39/FFFFFF?text=SP5' },
        ],
        netease: [
          { id: 1, title: '起风了', artist: '买辣椒也用券', change: 0, cover: 'https://placehold.co/150x150/FB7299/FFFFFF?text=WY1' },
          { id: 2, title: '世界这么大还是遇见你', artist: '程响', change: -1, cover: 'https://placehold.co/150x150/23ADE5/FFFFFF?text=WY2' },
          { id: 3, title: '少年', artist: '梦然', change: 1, cover: 'https://placehold.co/150x150/4CAF50/FFFFFF?text=WY3' },
          { id: 4, title: '你的答案', artist: '阿冗', change: 2, cover: 'https://placehold.co/150x150/FF9800/FFFFFF?text=WY4' },
          { id: 5, title: '下山', artist: '要不要买菜', change: -2, cover: 'https://placehold.co/150x150/9C27B0/FFFFFF?text=WY5' },
        ],
        qq: [
          { id: 1, title: '踏山河', artist: '是七叔呢', change: 1, cover: 'https://placehold.co/150x150/607D8B/FFFFFF?text=QQ1' },
          { id: 2, title: '桥边姑娘', artist: '海伦', change: -1, cover: 'https://placehold.co/150x150/3F51B5/FFFFFF?text=QQ2' },
          { id: 3, title: '我和我的祖国', artist: '王菲', change: 0, cover: 'https://placehold.co/150x150/E91E63/FFFFFF?text=QQ3' },
          { id: 4, title: '麻雀', artist: '李荣浩', change: 2, cover: 'https://placehold.co/150x150/00BCD4/FFFFFF?text=QQ4' },
          { id: 5, title: '你笑起来真好看', artist: '李昕融', change: -2, cover: 'https://placehold.co/150x150/CDDC39/FFFFFF?text=QQ5' },
        ],
      },
    }
  },
  computed: {
    // 获取当前排行榜列表
    currentRankingList() {
      return this.rankings[this.activeRankingTab] || []
    },
  },
  methods: {
    // 切换标签页
    switchTab(tab) {
      this.activeTab = tab
    },
    
    // 切换排行榜标签
    switchRankingTab(tab) {
      this.activeRankingTab = tab
    },
    
    // 播放歌曲
    playSong(song) {
      this.currentPlaying = song
      this.isPlaying = true
      console.log('播放歌曲:', song.title)
    },
    
    // 播放MV
    playMV(mv) {
      console.log('播放MV:', mv.title)
      // 实际应用中，这里应该跳转到MV播放页面
    },
    
    // 切换播放状态
    togglePlay() {
      this.isPlaying = !this.isPlaying
      console.log(this.isPlaying ? '开始播放' : '暂停播放')
    },
    
    // 下一首
    nextSong() {
      console.log('下一首')
      // 实际应用中，这里应该实现下一首的逻辑
    },
    
    // 格式化数字
    formatNumber(num) {
      if (num >= 100000000) {
        return (num / 100000000).toFixed(1) + '亿'
      } else if (num >= 10000) {
        return (num / 10000).toFixed(1) + '万'
      }
      return num.toString()
    },
  },
}
</script>

<style scoped>
/* 音乐页面整体样式 */
.music-view {
  min-height: 100vh;
  background-color: var(--bg-color);
}

/* 头部横幅样式 */
.music-header {
  position: relative;
  height: 400px;
  overflow: hidden;
  margin-bottom: 30px;
}

.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.header-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  transition: transform 0.5s ease;
}

.music-header:hover .header-image {
  transform: scale(1.1);
}

.header-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7));
}

.header-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 40px;
  text-align: center;
  color: white;
}

.header-title {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 10px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.header-subtitle {
  font-size: 18px;
  opacity: 0.9;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* 主要内容区域 */
.music-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 40px;
}

/* 标签页导航 */
.tab-navigation {
  display: flex;
  background-color: var(--card-bg);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.tab-item {
  flex: 1;
  padding: 12px 20px;
  border: none;
  background: none;
  color: var(--text-color);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.3s ease;
  text-align: center;
}

.tab-item:hover {
  background-color: var(--hover-color);
  color: var(--primary-color);
}

.tab-item.active {
  background-color: var(--primary-color);
  color: white;
}

/* 标签页内容 */
.tab-content {
  background-color: var(--card-bg);
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 通用区域标题样式 */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border-color);
}

.section-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-color);
  margin: 0;
}

.section-more {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color 0.3s ease;
}

.section-more:hover {
  color: var(--primary-color);
}

/* 网络热歌样式 */
.songs-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.song-item {
  display: flex;
  align-items: center;
  padding: 15px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.song-item:hover {
  background-color: var(--hover-color);
}

.song-rank {
  width: 40px;
  text-align: center;
  font-weight: 600;
}

.top-rank {
  color: var(--primary-color);
  font-size: 20px;
}

.normal-rank {
  color: var(--text-secondary);
  font-size: 18px;
}

.song-info {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.song-main-info h3 {
  margin: 0 0 5px 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-color);
}

.song-artist {
  font-size: 14px;
  color: var(--text-secondary);
}

.song-extra-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.song-duration {
  font-size: 14px;
  color: var(--text-secondary);
}

.song-play-btn {
  width: 32px;
  height: 32px;
  border: none;
  background-color: var(--primary-color);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  opacity: 0;
}

.song-item:hover .song-play-btn {
  opacity: 1;
}

.song-play-btn:hover {
  transform: scale(1.1);
  background-color: #E96385;
}

/* 经典MV样式 */
.mv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.mv-card {
  background-color: var(--card-bg);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mv-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.mv-thumbnail {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 比例 */
  overflow: hidden;
}

.mv-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.mv-card:hover .mv-image {
  transform: scale(1.05);
}

.mv-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.mv-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mv-card:hover .mv-overlay {
  opacity: 1;
}

.mv-play-icon {
  font-size: 60px;
  color: white;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.mv-info {
  padding: 15px;
}

.mv-title {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-color);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mv-artist {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: var(--text-secondary);
}

.mv-stats {
  display: flex;
  gap: 15px;
  font-size: 12px;
  color: var(--text-secondary);
}

.mv-views, .mv-likes {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 音乐测评样式 */
.reviews-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.review-card {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 20px;
  transition: box-shadow 0.3s ease;
}

.review-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.review-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
}

.review-rating {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rating-score {
  font-size: 24px;
  font-weight: bold;
  color: var(--primary-color);
}

.rating-stars {
  color: #ddd;
}

.rating-stars .active {
  color: #FFD700;
}

.review-title {
  flex: 1;
  margin: 0 0 0 20px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-color);
}

.review-excerpt {
  margin: 0 0 15px 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.review-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 15px;
  border-top: 1px solid var(--border-color);
}

.review-music-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.review-music-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-color);
}

.review-music-artist {
  font-size: 12px;
  color: var(--text-secondary);
}

.review-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-size: 12px;
  color: var(--text-secondary);
}

/* 音乐排行榜样式 */
.ranking-tabs {
  display: flex;
  gap: 10px;
}

.ranking-tab {
  padding: 6px 16px;
  border: 1px solid var(--border-color);
  background-color: transparent;
  color: var(--text-color);
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.ranking-tab:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.ranking-tab.active {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
}

.ranking-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 20px;
}

.ranking-item {
  display: flex;
  align-items: center;
  padding: 15px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.ranking-item:hover {
  background-color: var(--hover-color);
}

.ranking-number {
  width: 40px;
  text-align: center;
  font-weight: 600;
}

.top-ranking {
  color: var(--primary-color);
  font-size: 20px;
}

.normal-ranking {
  color: var(--text-secondary);
  font-size: 18px;
}

.ranking-cover {
  position: relative;
  width: 60px;
  height: 60px;
  margin: 0 20px;
  border-radius: 4px;
  overflow: hidden;
}

.song-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cover-play-btn {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 28px;
  height: 28px;
  border: none;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  opacity: 0;
}

.ranking-item:hover .cover-play-btn {
  opacity: 1;
}

.cover-play-btn:hover {
  transform: scale(1.1);
  background-color: var(--primary-color);
}

.ranking-info {
  flex: 1;
}

.ranking-song-title {
  margin: 0 0 5px 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-color);
}

.ranking-song-artist {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: var(--text-secondary);
}

.ranking-stats {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ranking-change {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.ranking-change.up {
  color: #f44336;
}

.ranking-change.down {
  color: #4caf50;
}

.ranking-change.stable {
  color: var(--text-secondary);
}

/* 迷你音乐播放器样式 */
.mini-player {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
}

.player-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.player-cover {
  width: 60px;
  height: 60px;
  border-radius: 4px;
  object-fit: cover;
}

.player-text h4 {
  margin: 0 0 5px 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-color);
}

.player-text p {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
}

.player-controls {
  display: flex;
  gap: 15px;
}

.control-btn {
  padding: 8px 20px;
  border: 1px solid var(--primary-color);
  background-color: white;
  color: var(--primary-color);
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.control-btn:hover {
  background-color: var(--primary-color);
  color: white;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .music-header {
    height: 300px;
  }
  
  .header-title {
    font-size: 36px;
  }
  
  .header-subtitle {
    font-size: 16px;
  }
  
  .tab-navigation {
    overflow-x: auto;
    padding: 10px 5px;
  }
  
  .tab-item {
    flex: 0 0 auto;
    margin: 0 5px;
  }
  
  .mv-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .ranking-tabs {
    overflow-x: auto;
  }
  
  .review-header {
    flex-direction: column;
    gap: 10px;
  }
  
  .review-title {
    margin-left: 0;
  }
  
  .review-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .mini-player {
    padding: 10px;
  }
  
  .player-cover {
    width: 40px;
    height: 40px;
  }
  
  .player-text h4 {
    font-size: 14px;
  }
  
  .player-text p {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .music-header {
    height: 200px;
  }
  
  .header-content {
    padding: 20px;
  }
  
  .header-title {
    font-size: 28px;
  }
  
  .tab-content {
    padding: 20px 15px;
  }
  
  .mv-grid {
    grid-template-columns: 1fr;
  }
  
  .song-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .song-extra-info {
    width: 100%;
    justify-content: space-between;
  }
  
  .song-play-btn {
    opacity: 1;
  }
}
</style>